<template>
	<view class="container" style="background-image: url(/static/images/lottery_bg.png);">
		<view class="lottery-wheel">
			<almost-lottery
			  :prize-list="prizeList"
			  :ring-count="20"
			  :duration="5"
			  :canvas-width="canvasData.width"
			  :canvas-height="canvasData.height"
			  :prize-index="prizeIndex"
			  @reset-index="prizeIndex = -1"
			  @draw-start="handleDrawStart"
			  @draw-end="handleDrawEnd"
			  @finish="handleDrawFinish"
			  v-if="prizeList.length"
			/>
			<text class="almost-lottery__tip" v-else>奖品准备中...</text>
		</view>
	</view>
</template>

<script>
	import AlmostLottery from '@/components/almost-lottery/almost-lottery.vue'
	export default {
		components: {
			AlmostLottery
		},
		data() {
			return {
				// canvas 宽高
				canvasData: {
					width: 240,
					height: 240
				},
				// 奖品数据
				prizeList: [],
				// 中奖下标
				prizeIndex: -1,
				// 中奖类目名称
				targetName: ''
			};
		},
		onLoad: function (option) {
			this.getPrizeList();
		},
		onBackPress: function (option) {
            if (options.from === 'navigateBack') {  
				uni.switchTab({
					url: '/pages/index/index'
				})  
            } 
            return true;  
        }, 
		onNavigationBarButtonTap(val) {
			uni.navigateTo({
				url: '/pages/help/other?type=lottery'
			});	
		},
		methods: {
			// 重新生成
			handleInitCanvas () {
				this.prizeList = []
				this.getPrizeList()
			},
			// 获取奖品列表
			getPrizeList () {
				uni.showLoading({
					title: '奖品准备中...'
				})
				// 请求奖品列表
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['timestamp='+timestamp]);
				this.helper.req({
					api:"getLottery",
					timestamp:timestamp,
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					this.prizeList = res.data.data.list;
					// 遍历奖品列表，为每个奖品添加 prizeImage 属性
					this.prizeList.forEach(prize => {
						prize.prizeImage = this.weburl + prize.prizeImage;
						console.log(prize.prizeImage);
					});
					setTimeout(() => {
						uni.hideLoading();
					}, 300);
				})
			},
			// 本次抽奖开始
			handleDrawStart () {
				this.targetName = '';
				let list = [...this.prizeList];
				
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['token='+info.token,'timestamp='+timestamp]);
				this.helper.req({
					api:"doLottery",
					timestamp:timestamp,
					data:{token:info.token},
					header:{sign:sign},
					method:'POST',
				}).then(res=>{
					if (res.data.errorcode  == 10000) {
						uni.showModal({
							title: "提示",
							content: res.data.message,
							showCancel: false,
							confirmText: "确定",
							success:function(res){
								uni.redirectTo({
									url: '/pages/games/lottery'
								});	
							}
						})
						return;
					}else{
						let prizeId = res.data.data.position;
						let prizeImage =this.weburl+res.data.data.prizeImage
						list.forEach((item, index) => {
							if (item.prizeId === prizeId) {
								// 中奖下标
								this.prizeIndex = index
							}
						})
						this.targetName = res.data.message;
						// console.log('当前域名',prizeImage)
						//  console.log('本次抽中奖品 =>', this.prizeList[this.prizeIndex].prizeImage)
					}
				})
			},
			// 本次抽奖结束
			handleDrawEnd () {
				// 旋转结束后，可以执行拿到结果后的逻辑
				let prizeName = this.prizeList[this.prizeIndex].name;
				uni.showModal({
					title: "提示",
					content: this.targetName,
					showCancel: false,
					confirmText: "确定",
					success:function(res){

					}
				})
				// this.targetName = prizeName === '谢谢参与' ? prizeName : `恭喜您，获得 ${prizeName}` 
			},
			handleDrawFinish(){
				
			}
		},
	};
</script>

<style lang="scss" scoped>
  $wheelBgUrl: '~static/almost-lottery/almost-lottery__bg';
  .container {
    background-size: 100% 100%;
    text-align: center;
    height: 100vh;
  }
  .lottery-wheel{
	  padding-top: 400upx;
  }
  .lottery-title {
    text-align: center;
    margin-bottom: 100upx;
  }
  .lottery-title__text {
    color: #000;
    font-size: 60upx;
    font-weight: bold;
  }
  .lottery-result {
    text-align: center;
    margin-top: 100upx;
  }
  .lottery-result__text {
    color: #000;
    font-size: 40upx;
    font-weight: bold;
  }
  .lottery-wheel {
    text-align: center;
  }
  .almost-lottery__tip {
    font-size: 24upx;
  }
  .lottery-action {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 40upx;
    width: 260upx;
    height: 80upx;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 10upx;
    text-align: center;
    background-color: red;
    margin: 0 auto;
  }
  .lottery-action__text {
    color: #FFFFFF;
    font-size: 24upx;
  }
</style>
